<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import WorldA from '../../components/ThreeJS/WorldA/WorldA.vue'

const data = reactive({
  coordinates: [
    {
      startArray: {
        lon: 116.358976,
        lat: 39.803282,
        isClick: 'true',
        name: '中国',
        color: '#FF0000',
        perData: '999',
      },
      endArray: [
        {
          lon: 116.358976,
          lat: 39.803282,
          isClick: 'true',
          name: '中国',
          color: '#FF0000',
          perData: '999',
        },
        {
          lon: 139.812263,
          lat: 35.677294,
          isClick: 'true',
          name: '日本',
          color: '#A41FE8',
          perData: '100',
        },
        {
          lon: 77.198596,
          lat: 28.575136,
          isClick: 'true',
          name: '印度',
          color: '#E8BB1F',
          perData: '99',
        },
        {
          lon: -77.02238,
          lat: 38.900042,
          isClick: 'true',
          name: '美国',
          color: '#E81F56',
          perData: '99',
        },
        {
          lon: 31.266092,
          lat: 30.085626,
          isClick: 'true',
          name: '埃及',
          color: '#1FFBC6',
          perData: '99',
        },
        {
          lon: 103.813654,
          lat: 1.291125,
          isClick: 'true',
          name: '新加坡',
          color: '#E8BB1F',
          perData: '99',
        },
        {
          lon: -47.930912,
          lat: -15.781949,
          isClick: 'true',
          name: '巴西',
          color: '#A41FE8',
          perData: '99',
        },
        {
          lon: 149.130214,
          lat: -35.318235,
          isClick: 'true',
          name: '澳大利亚',
          color: '#E81F56',
          perData: '99',
        },
      ],
    },
    {
      startArray: {
        lon: 31.266092,
        lat: 30.085626,
        isClick: 'true',
        name: '埃及',
        color: '#1FFBC6',
        perData: '99',
      },
      endArray: [
        {
          name: '西藏',
          lon: 91.132212, //经度
          lat: 29.660361, //维度
          color: '#FF0000',
          perData: '100',
        },
        {
          name: '广西',
          lon: 108.30616,
          lat: 22.830824,
          color: '#FF0000',
          perData: '100',
        },

        {
          name: '江西',
          lon: 115.892151,
          lat: 28.676493,
          color: '#FF0000',
          perData: '100',
        },

        {
          name: '贵阳',
          lon: 106.630153,
          lat: 26.647661,
          color: '#FF0000',
          perData: '100',
        },
      ],
    },
  ],
  rotation: '关闭旋转',
})

const threeMapId = ref(null)

onMounted(() => {
  infoMap()
  // createLabelObj()
  // columnChange()
  createAreaPoint()
  flyLineChange()
})

// 重置
const reset = () => {
  infoMap()
}

// 地球添加标记点
const infoMap = () => {
  for (let i = 0; i < data.coordinates.length; i++) {
    for (let r = 0; r < data.coordinates[i].endArray.length; r++) {
      threeMapId.value.infoMark(data.coordinates[i].endArray[r])
    }
  }
}

// 移动相机
const cameraPos = (item) => {
  threeMapId.value.cameraPos(item)
}

// 开启或关闭地球自动旋转
const rotationY = ref(false)
const rotationChange = () => {
  rotationY.value = !rotationY.value
  threeMapId.value.rotation()
  threeMapId.value.frameDivClose()
  data.rotation = rotationY.value == true ? '开启旋转' : '关闭旋转'
}

// 添加光柱infoColumn
const columnChange = () => {
  for (let i = 0; i < data.coordinates.length; i++) {
    for (let r = 0; r < data.coordinates[i].endArray.length; r++) {
      threeMapId.value.infoColumn(data.coordinates[i].endArray[r])
    }
  }
}
// 添加标签
const createLabelObj = () => {
  for (let i = 0; i < data.coordinates.length; i++) {
    for (let r = 0; r < data.coordinates[i].endArray.length; r++) {
      threeMapId.value.createLabelObj(data.coordinates[i].endArray[r])
    }
  }
}
// 添加区域点
const createAreaPoint = () => {
  for (let i = 0; i < data.coordinates.length; i++) {
    for (let r = 0; r < data.coordinates[i].endArray.length; r++) {
      threeMapId.value.createAreaPoint(data.coordinates[i].endArray[r])
    }
  }
}
// 添加飞线infoFlyLine
const flyLineChange = () => {
  threeMapId.value.createFlyLine(data.coordinates)
}

// 删除所有标记点
const delAllChange = () => {
  for (let i = 0; i < data.coordinates.length; i++) {
    for (let r = 0; r < data.coordinates[i].endArray.length; r++) {
      threeMapId.value.delAll(data.coordinates[i].endArray[r])
    }
  }
}

// 删除指定标记点
const delMarkChange = () => {
  let item = {
    name: '美国',
  }
  threeMapId.value.delMark(item)
}
</script>

<template>
  <div class="home">
    <WorldA ref="threeMapId" />
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100vw;
  height: calc(100vh - 75px);
}
</style>
